프로그레시브 웹 앱 딥 링킹: URL 기반 앱 상태 복원

프로그레시브 웹 앱(PWA)은 우리가 웹 애플리케이션을 경험하는 방식을 혁신했습니다. PWA는 네이티브 앱의 최고의 기능과 웹의 접근성을 결합하여 오프라인 기능, 푸시 알림, 그리고 원활한 사용자 경험을 제공합니다. PWA 사용자 경험을 향상시키는 중요한 측면 중 하나는 효과적인 상태 복원을 통한 딥 링킹 구현입니다.

딥 링킹이란 무엇인가?

딥 링킹은 URL을 사용하여 사용자를 모바일 앱이나 PWA 내의 특정 위치나 콘텐츠로 직접 안내하는 기능입니다. 단순히 앱의 홈 화면을 여는 대신, 딥 링크는 사용자를 제품 페이지, 설정 화면 또는 다른 특정 콘텐츠로 직접 이동시킬 수 있습니다. PWA의 맥락에서 딥 링킹은 URL이 PWA를 실행할 뿐만 아니라, 사용자가 기대하는 컨텍스트에 맞게 애플리케이션의 상태를 복원하는 것을 의미합니다.

PWA에서 딥 링킹이 중요한 이유는 무엇인가?

딥 링킹은 여러 가지 이유로 필수적입니다:

• 향상된 사용자 경험: 사용자는 전체 애플리케이션을 탐색할 필요 없이 특정 콘텐츠에 즉시 접근할 수 있습니다. 이는 사용자가 즉각적인 만족을 기대하는 오늘날의 빠른 디지털 세상에서 매우 중요합니다.
• 참여도 향상: 마케팅 캠페인, 소셜 미디어 게시물 또는 이메일 뉴스레터의 딥 링크는 사용자를 PWA 내의 관련 콘텐츠로 직접 유도하여 참여도와 전환율을 높일 수 있습니다.
• 원활한 공유: 사용자는 간단한 URL을 통해 PWA 내의 특정 콘텐츠를 다른 사람과 쉽게 공유할 수 있습니다. 수신자는 자신의 PWA 인스턴스 내에서 동일한 콘텐츠에 직접 접근할 수 있습니다.
• SEO 이점: PWA는 검색 엔진에 의해 인덱싱되며, 딥 링크를 통해 검색 엔진이 앱 내의 특정 콘텐츠를 크롤링하고 인덱싱할 수 있어 가시성과 검색 순위를 향상시킵니다.
• 앱 상태 보존: 올바르게 구현된 딥 링킹은 애플리케이션의 상태를 보존하여, 앱이 닫혔다가 딥 링크를 통해 다시 열린 후에도 사용자 경험이 일관되게 유지되도록 보장합니다. 이는 복잡한 애플리케이션이나 워크플로우에 매우 중요합니다.

앱 상태와 복원 이해하기

앱 상태는 PWA의 현재 상태를 정의하는 데이터를 의미합니다. 여기에는 다음이 포함될 수 있습니다:

• 현재 표시되고 있는 페이지나 뷰.
• 쇼핑 카트의 내용물.
• 양식에 입력된 사용자 데이터.
• 페이지의 스크롤 위치.
• 인증 상태.

앱 상태를 복원한다는 것은 사용자가 딥 링크를 통해 PWA를 열었을 때, 애플리케이션이 링크가 생성되었을 때와 똑같은 상태로 돌아가는 것을 의미합니다. 이는 부드럽고 직관적인 사용자 경험을 위해 매우 중요합니다. 긴 양식을 작성하는 사용자를 상상해 보세요. 만약 적절한 상태 복원 없이 앱을 닫았다가 다시 열면, 처음부터 다시 시작해야 할 것입니다. 앱 상태 복원을 통한 딥 링킹은 이 문제를 해결합니다.

앱 상태 복원을 통한 PWA 딥 링킹 구현 방법

앱 상태 복원을 통한 딥 링킹 구현에는 여러 단계가 포함됩니다:

1. URL 구조 정의하기

잘 정의된 URL 구조는 효과적인 딥 링킹에 매우 중요합니다. 앱의 콘텐츠와 기능이 특정 URL에 어떻게 매핑되는지 고려하세요. 이해하고 유지하기 쉬운 일관되고 논리적인 구조를 사용하세요.

예시:

전자상거래 PWA를 생각해 보세요. URL 구조는 다음과 같을 수 있습니다:

• / (홈페이지)
• /products (모든 제품 목록)
• /products/<product-id> (특정 제품 페이지, 예: /products/123)
• /cart (쇼핑 카트)
• /checkout (결제 과정)
• /profile (사용자 프로필)

더 복잡한 상태 관리를 위해 쿼리 파라미터를 사용할 수 있습니다:

• /products?category=electronics ("electronics" 카테고리의 제품 목록)
• /search?q=keyword ("keyword"에 대한 검색 결과)

2. 들어오는 URL 처리하기

PWA는 들어오는 URL을 처리하고 앱 상태를 복원하는 데 필요한 정보를 추출할 수 있어야 합니다. 이는 일반적으로 JavaScript를 사용하여 URL을 파싱하고 그에 따라 애플리케이션의 상태를 업데이트하는 것을 포함합니다. 들어오는 URL을 처리하는 주된 위치는 PWA의 메인 애플리케이션 로직이나 라우터 내입니다.

JavaScript를 사용한 예시:

            
function handleDeepLink() {
  const url = new URL(window.location.href);
  const path = url.pathname;

  switch (path) {
    case '/products':
      // Display the list of products
      displayProducts();
      break;
    case '/cart':
      // Display the shopping cart
      displayCart();
      break;
    default:
      if (path.startsWith('/products/')) {
        const productId = path.split('/').pop();
        // Display the details of the specified product
        displayProductDetails(productId);
      } else {
        // Display the home page
        displayHomePage();
      }
  }

  // Handle query parameters
  const category = url.searchParams.get('category');
  if (category) {
    // Filter products by category
    filterProductsByCategory(category);
  }

  const searchQuery = url.searchParams.get('q');
  if (searchQuery) {
    // Perform a search
    performSearch(searchQuery);
  }
}

// Call handleDeepLink when the app loads
handleDeepLink();

// Listen for changes in the URL (using the History API)
window.addEventListener('popstate', handleDeepLink);

            

              
                Copy
              
            
          

이 예시는 URL을 파싱하고 경로 및 쿼리 파라미터를 기반으로 앱의 상태를 업데이트하는 방법을 보여줍니다. handleDeepLink 함수는 앱이 로드될 때와 URL이 변경될 때마다(앱 내 탐색으로 인해) 호출됩니다. `popstate` 이벤트 리스너의 사용에 주목하세요. 이는 PWA 내에서 브라우저의 뒤로/앞으로 버튼 탐색을 처리하는 데 필수적입니다.

3. 앱 상태 저장 및 복원하기

앱 상태를 효과적으로 복원하려면, 필요한 데이터를 저장하고 딥 링크를 통해 앱이 다시 열릴 때 이를 검색하는 메커니즘이 필요합니다. 이를 위해 여러 가지 방법을 사용할 수 있으며, 각각 장단점이 있습니다.

로컬 스토리지

로컬 스토리지는 사용자 브라우저에 소량의 데이터를 저장하는 간단하고 편리한 방법입니다. 사용자 기본 설정, 인증 토큰 또는 작은 쇼핑 카트의 내용물과 같은 것을 저장하는 데 이상적입니다. 그러나 로컬 스토리지는 저장 용량이 제한되어 있으며 크거나 민감한 데이터에는 사용해서는 안 됩니다.

로컬 스토리지를 사용한 예시:

            
// Store the current product ID
localStorage.setItem('currentProductId', productId);

// Restore the product ID
const currentProductId = localStorage.getItem('currentProductId');
if (currentProductId) {
  displayProductDetails(currentProductId);
}

            

              
                Copy
              
            
          

세션 스토리지

세션 스토리지는 로컬 스토리지와 유사하지만 데이터는 사용자의 세션 기간 동안만 저장됩니다. 사용자가 브라우저 탭이나 창을 닫으면 데이터는 자동으로 삭제됩니다. 세션 스토리지는 여러 세션에 걸쳐 필요하지 않은 임시 데이터를 저장하는 데 적합합니다.

쿠키

쿠키는 사용자 컴퓨터에 저장되는 작은 텍스트 파일입니다. 종종 사용자 활동을 추적하고 기본 설정을 저장하는 데 사용됩니다. 그러나 쿠키는 작은 저장 용량 및 잠재적인 개인 정보 보호 문제 등 여러 제한 사항이 있습니다. 최신 PWA는 종종 쿠키보다 로컬 스토리지나 IndexedDB를 선호합니다.

IndexedDB

IndexedDB는 로컬 스토리지나 쿠키보다 더 강력하고 유연한 스토리지 솔루션입니다. 사용자의 브라우저에 대량의 구조화된 데이터를 저장할 수 있는 NoSQL 데이터베이스입니다. IndexedDB는 큰 쇼핑 카트의 내용물, 사용자 프로필 또는 오프라인 데이터와 같은 복잡한 앱 상태를 저장하는 데 이상적입니다.

IndexedDB를 사용한 예시:

            
// Open a database
const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.error('Error opening database:', event);
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // Store the current product details
  const transaction = db.transaction(['products'], 'readwrite');
  const objectStore = transaction.objectStore('products');
  const addRequest = objectStore.put({ id: productId, name: productName, price: productPrice });

  addRequest.onsuccess = function(event) {
    console.log('Product added to database');
  };

  // Retrieve the product details
  const getRequest = objectStore.get(productId);

  getRequest.onsuccess = function(event) {
    const product = event.target.result;
    if (product) {
      displayProductDetails(product.id, product.name, product.price);
    }
  };
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('products', { keyPath: 'id' });
};

            

              
                Copy
              
            
          

이 예시는 IndexedDB 데이터베이스를 열고, 제품 세부 정보를 저장하고, 나중에 검색하는 방법을 보여줍니다. onupgradeneeded 이벤트는 객체 저장소가 아직 존재하지 않을 경우 생성하는 데 사용됩니다.

서비스 워커와 캐싱

서비스 워커는 네트워크 요청을 가로채고 캐시된 응답을 제공하여 PWA가 오프라인 또는 연결이 제한된 상태에서도 작동하도록 할 수 있습니다. 또한 앱 상태를 저장하고 복원하는 데에도 사용될 수 있습니다. 필요한 데이터를 캐싱함으로써 사용자가 오프라인일 때에도 앱이 계속 작동하도록 보장할 수 있습니다.

4. 다양한 시나리오 처리하기

앱 상태 복원을 통한 딥 링킹을 구현할 때는 다양한 시나리오를 원활하게 처리하는 것이 중요합니다:

• 앱이 설치되지 않은 경우: 사용자가 딥 링크를 클릭했지만 PWA가 설치되지 않은 경우, PWA 설치 페이지(예: 앱 스토어 또는 설치 프롬프트가 있는 PWA 홈페이지)로 리디렉션해야 합니다. 지연된 딥 링킹(아래 참조) 사용을 고려하세요.
• 앱이 이미 실행 중인 경우: PWA가 이미 백그라운드에서 실행 중인 경우, 포그라운드로 가져와 앱 상태를 복원해야 합니다. 이를 위해 서비스 워커에서 `clients.matchAll()` 메서드를 사용하여 기존 PWA 인스턴스를 찾아야 할 수 있습니다.
• 유효하지 않거나 오래된 딥 링크: 딥 링크가 유효하지 않거나 오래된 경우, 사용자에게 오류 메시지를 표시하고 PWA 내의 관련 페이지(예: 홈페이지 또는 검색 결과 페이지)로 리디렉션해야 합니다.
• 권한: PWA는 종종 사용자 권한(위치, 카메라, 알림)을 요구합니다. 권한 요청을 원활하게 처리하고 딥 링크와 관련된 특정 기능에 왜 필요한지 설명하세요.

고급 딥 링킹 기술

기본 사항을 넘어, PWA의 딥 링킹 기능을 향상시키기 위한 몇 가지 고급 기술은 다음과 같습니다:

지연된 딥 링킹(Deferred Deep Linking)

지연된 딥 링킹을 사용하면 PWA를 설치하기 *전*에 딥 링크를 클릭한 사용자를 추적할 수 있습니다. 사용자가 PWA를 처음 설치하고 열 때, 지연된 딥 링크를 검색하여 의도된 콘텐츠로 안내할 수 있습니다. 이는 마케팅 캠페인에 특히 유용합니다.

작동 방식:

1. 사용자가 딥 링크(예: 광고)를 클릭합니다.
2. PWA가 설치되지 않은 경우, 앱 스토어 또는 PWA 홈페이지로 리디렉션됩니다.
3. 추적 서비스가 딥 링크 정보(예: 쿠키 또는 로컬 스토리지)를 저장합니다.
4. 사용자가 PWA를 설치하고 열면, 앱은 저장된 딥 링크 정보를 검색합니다.
5. 앱은 사용자를 의도된 콘텐츠로 안내합니다.

여러 타사 서비스에서 지연된 딥 링킹 솔루션을 제공합니다.

웹 앱 매니페스트 사용하기

웹 앱 매니페스트(manifest.json)는 브라우저에 이름, 아이콘, 시작 URL 등 PWA에 대한 정보를 제공합니다. 매니페스트의 `start_url` 속성을 사용하여 PWA가 홈 화면에서 실행될 때 열려야 하는 URL을 지정할 수 있습니다. 이를 사용하여 기본적인 딥 링킹 기능을 구현할 수 있습니다.

예시:

            
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/products/123",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

            

              
                Copy